<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="sie-edge" />
<link rel="stylesheet" type="text/css" th:href="@{~/css/style.css}">
  <link rel="stylesheet" th:href="@{/assets/bootstrap/css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/assets/font-awesome/css/font-awesome.min.css}">
  <link rel="stylesheet" th:href="@{/assets/css/form-elements.css}">
  <link rel="stylesheet" th:href="@{/assets/css/style.css}">
  <script th:src="@{/js/sweetalert.min.js}"></script>
  <link rel="stylesheet" type="text/css" th:href="@{/css/sweetalert.css}">
<title>登录注册页面</title>

<!--图标库-->
<script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>

</head>

<body>
<div class="container" id="container">
  <div class="form-container sign-up-container">
    <form >
      <h1>欢迎注册</h1>
      <span>使用您的电子邮箱注册</span>
      <input type="text" placeholder="用户名" name="username" id="username">
      <input type="password" placeholder="密码" name="password" id="password">
      <input type="password" placeholder="再次输入密码" name="password2" id="password2">
      <div>
      <input type="email" placeholder="邮箱" name="email" id="email">
        <a class="btn" id="sendMobileCode" >
        <span id="email_btn">获取</span>
       </a>
      </div>
      <input type="tel" placeholder="请输入验证码" name="code" id="code">
      <input id="regist" type="button" value="注册"/>
    </form>
  </div>
  <div class="form-container sign-in-container">
    <form th:action="@{/users/login}" method="get">
      <h1>第三方登录</h1>
      <div class="social-container"> <a href="#" class="social">
        <ion-icon name="logo-facebook"></ion-icon>
        </a> <a href="#" class="social">
        <ion-icon name="logo-googleplus"></ion-icon>
        </a> <a href="#" class="social">
        <ion-icon name="logo-linkedin"></ion-icon>
        </a> </div>
      <span>用户名登录</span>
      <input type="text" placeholder="邮箱" name="username">
      <input type="password" placeholder="密码" name="password">
      <button type="submit">登录</button><a th:href="@{/users/forget}">忘记密码</a>
    </form>
  </div>
  <div class="overlay-container">
    <div class="overlay">
      <div class="overlay-panel overlay-left">
        <h1>欢迎回来</h1>
        <p>与我们保持联系请登录您的个人信息</p>
        <button class="ghost" id="signIn">登录</button><a th:href="@{/users/forget}">忘记密码</a>
      </div>
      <div class="overlay-panel overlay-right">
        <h1>欢迎光临</h1>
        <p>输入您的个人资料，并与我们一起开始旅程</p>
        <button class="ghost" id="signUp">注册</button>
      </div>
    </div>
  </div>
</div>

<script  th:src="@{~/js/script.js}"></script>
<script th:src="@{/assets/js/jquery-1.11.1.js}"></script>
<script th:src="@{/assets/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/assets/js/jquery.backstretch.min.js}"></script>
<script th:src="@{/assets/js/scripts.js}"></script>
<script>
  <!--邮箱发送验证码-->
  $("#email_btn").click(function () {
    var email=$("#email").val();
    alert("请打开邮箱认真查找");
    $.ajax({
      type:"POST",
      url:"/users/registerCode",
      data:{"email":email},
      success:function (msg) {
        if(msg["result"]==true){
          $("#email_tip").text("发送成功");
        }else if(msg["result"] == false){
          alert("发送失败");
        }
      }
    })
  });

  $("#regist").click(function () {
    var username=$('#username').val();
    var password=$('#password').val();
    var password2=$('#password2').val();
    var email =$('#email').val();
    var code=$('#code').val();
    $.ajax({
      type:'POST',
      url:'/users/regist',
      data:{
        username:username,
        password:password,
        password2:password2,
        email:email,
        code:code
      },
      success:function (data) {
        if(data.code==100){
          swal({
            title:data.msg,
            type:'success',
          });
        }else {
          swal({
            title:data.msg,
            type:'error',
          });
        }

      },
    });
  });

</script>
</body>

</html>
